<template>
  <view
    class="bg-gradient-to-r from-blue-50 to-blue-100 min-h-screen w-[750rpx] box-border"
  >
    <!-- 返回按钮 -->
    <view
      class="absolute top-[30rpx] left-[30rpx] z-20 w-[60rpx] h-[60rpx] flex items-center justify-center cursor-pointer"
      @click="goBack"
    >
      <IconFont
        font-class-name="iconfont"
        class-prefix="icon"
        name="left"
        size="20"
        color="#000"
      />
    </view>
    <view class="px-[32rpx] py-[64rpx]">
      <!-- Header -->
      <view class="text-center mb-[80rpx]">
        <view
          class="w-[160rpx] h-[160rpx] bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-[32rpx] shadow-lg"
        >
          <IconFont name="user-plus" class="text-white text-[60rpx]" />
        </view>
        <text class="text-[48rpx] font-bold text-blue-900 mb-[16rpx] block"
          >用户认证</text
        >
        <text class="text-blue-700 text-[28rpx]"
          >加入平台，开启您的创业之旅</text
        >
      </view>

      <!-- Progress Bar -->
      <view class="relative mb-[96rpx]">
        <view
          class="absolute top-[28rpx] left-0 right-0 h-[8rpx] bg-blue-200"
        ></view>
        <view
          class="absolute top-[28rpx] left-0 h-[8rpx] bg-blue-500 transition-all duration-500"
          :style="{ width: progressWidth }"
        ></view>

        <view class="flex justify-between relative">
          <view
            v-for="(step, index) in steps"
            :key="index"
            class="progress-step"
            :class="{ completed: step.completed, active: step.active }"
          >
            <view
              class="w-[56rpx] h-[56rpx] rounded-full flex items-center justify-center mx-auto mb-[16rpx]"
              :class="
                step.completed
                  ? 'bg-green-500'
                  : step.active
                  ? 'bg-white border-2 border-blue-500'
                  : 'bg-white border-2 border-blue-200'
              "
            >
              <IconFont
                v-if="step.completed"
                name="check"
                class="text-white text-[24rpx]"
              />
              <text
                v-else
                class="font-medium text-[24rpx]"
                :class="step.active ? 'text-blue-500' : 'text-blue-400'"
              >
                {{ index + 1 }}
              </text>
            </view>
            <text
              class="text-[24rpx]"
              :class="
                step.active ? 'text-blue-700 font-medium' : 'text-blue-400'
              "
            >
              {{ step.title }}
            </text>
          </view>
        </view>
      </view>

      <!-- Form Steps -->
      <view class="bg-white rounded-xl shadow-lg mb-[64rpx] overflow-hidden">
        <!-- Step Indicator -->
        <view
          class="h-[8rpx] bg-gradient-to-r from-blue-500 to-blue-600"
        ></view>

        <!-- Step Content -->
        <view class="p-[48rpx]">
          <!-- Step 2: 完善资料 -->
          <view
            class="text-[36rpx] font-semibold text-blue-900 mb-[48rpx] flex items-center"
          >
            <IconFont
              name="user-edit"
              class="text-blue-500 mr-[16rpx] text-[36rpx]"
            />
            <text>完善个人资料</text>
          </view>

          <nut-form ref="formRef" :model="formData">
            <!-- 姓名 -->
            <view class="mb-[48rpx]">
              <text
                class="block text-[28rpx] font-medium text-blue-800 mb-[16rpx]"
              >
                真实姓名 <text class="text-red-500">*</text>
              </text>
              <view class="relative">
                <IconFont
                  name="user"
                  class="text-blue-400 absolute left-[24rpx] top-[28rpx] text-[28rpx]"
                />
                <input
                  v-model="formData.realName"
                  type="text"
                  class="w-full pl-[80rpx] pr-[32rpx] py-[16rpx] border border-blue-200 rounded-lg focus:ring-2 focus:ring-blue-300 focus:border-blue-500 transition text-[28rpx]"
                  placeholder="请输入真实姓名"
                />
              </view>
            </view>

            <!-- 登录密码 -->
            <view class="mb-[48rpx]">
              <text
                class="block text-[28rpx] font-medium text-blue-800 mb-[16rpx]"
              >
                设置登录密码 <text class="text-red-500">*</text>
              </text>
              <view class="relative">
                <IconFont
                  name="lock"
                  class="text-blue-400 absolute left-[24rpx] top-[28rpx] text-[28rpx]"
                />
                <input
                  v-model="formData.loginPassword"
                  type="password"
                  class="w-full pl-[80rpx] pr-[32rpx] py-[16rpx] border border-blue-200 rounded-lg focus:ring-2 focus:ring-blue-300 focus:border-blue-500 transition text-[28rpx]"
                  placeholder="设置6-20位登录密码"
                />
              </view>
            </view>

            <!-- 交易密码 -->
            <view class="mb-[48rpx]">
              <text
                class="block text-[28rpx] font-medium text-blue-800 mb-[16rpx]"
              >
                设置交易密码 <text class="text-red-500">*</text>
              </text>
              <view class="relative">
                <IconFont
                  name="key"
                  class="text-blue-400 absolute left-[24rpx] top-[28rpx] text-[28rpx]"
                />
                <input
                  v-model="formData.tradePassword"
                  type="password"
                  class="w-full pl-[80rpx] pr-[32rpx] py-[16rpx] border border-blue-200 rounded-lg focus:ring-2 focus:ring-blue-300 focus:border-blue-500 transition text-[28rpx]"
                  placeholder="设置6位数字交易密码"
                />
              </view>
              <text class="text-[24rpx] text-blue-500 mt-[8rpx] block"
                >交易密码用于资金操作，请勿与登录密码相同</text
              >
            </view>

            <!-- 邀请码 -->
            <view class="mb-[48rpx]">
              <text
                class="block text-[28rpx] font-medium text-blue-800 mb-[16rpx]"
                >邀请码 (选填)</text
              >
              <view class="relative">
                <IconFont
                  name="user-friends"
                  class="text-blue-400 absolute left-[24rpx] top-[28rpx] text-[28rpx]"
                />
                <input
                  v-model="formData.inviteCode"
                  type="text"
                  class="w-full pl-[80rpx] pr-[32rpx] py-[16rpx] border border-blue-200 rounded-lg focus:ring-2 focus:ring-blue-300 focus:border-blue-500 transition text-[28rpx]"
                  placeholder="请输入邀请人邀请码"
                />
              </view>
            </view>

            <!-- Info Box -->
            <view
              class="bg-blue-50 border-l-4 border-blue-500 p-[32rpx] rounded-r-lg mb-[48rpx]"
            >
              <text
                class="text-blue-800 font-medium mb-[16rpx] block text-[28rpx]"
              >
                <IconFont
                  name="exclamation-circle"
                  class="text-red-500 mr-[8rpx] text-[28rpx]"
                />
                重要提示：
              </text>
              <text class="text-[24rpx] text-blue-700 mb-[16rpx] block"
                >除浏览外，其他功能必须实名认证后方能参与，包括提现平台账户款项。</text
              >
              <text class="text-[24rpx] text-blue-700 block"
                >个人平台提现限制：<text class="text-blue-900 font-bold"
                  >2万元/天</text
                ></text
              >
              <text class="text-[24rpx] text-blue-700 block"
                >平台商家提现限制：<text class="text-blue-900 font-bold"
                  >15万元/天</text
                ></text
              >
            </view>

            <!-- Buttons -->
            <view class="pt-[32rpx] space-y-[24rpx]">
              <nut-button
                type="primary"
                block
                size="large"
                class="h-[96rpx] text-[32rpx] bg-gradient-to-r from-blue-500 to-blue-600"
                @click="handleNext"
              >
                下一步
              </nut-button>
              <nut-button
                type="default"
                block
                size="large"
                class="h-[96rpx] text-[32rpx] border-blue-500 text-blue-600"
                @click="handlePrev"
              >
                上一步
              </nut-button>
            </view>
          </nut-form>
        </view>
      </view>

      <!-- Footer -->
      <view class="text-center text-blue-600 text-[28rpx]">
        <text class="block">© 2023 创业服务平台 | </text>
        <text class="text-blue-800">用户协议</text>
        <text> | </text>
        <text class="text-blue-800">隐私政策</text>
        <text class="mt-[16rpx] block text-[24rpx]"
          >客服电话：400-888-8888 | 工作日 9:00-18:00</text
        >
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";

// 返回上一页
const goBack = () => {
  Taro.navigateBack({
    delta: 1,
  })
}

// 表单数据
const formData = reactive({
  realName: "",
  loginPassword: "",
  tradePassword: "",
  inviteCode: "",
});

// 进度条宽度
const progressWidth = ref("25%");

// 步骤数据
const steps = ref([
  { title: "手机验证", completed: true, active: false },
  { title: "完善资料", completed: false, active: true },
  { title: "会员选择", completed: false, active: false },
  { title: "实名认证", completed: false, active: false },
]);

// 表单引用
const formRef = ref();

// 下一步
const handleNext = () => {
  // 表单验证
  if (!formData.realName) {
    Taro.showToast({
      title: "请输入真实姓名",
      icon: "none",
    });
    return;
  }

  if (!formData.loginPassword) {
    Taro.showToast({
      title: "请设置登录密码",
      icon: "none",
    });
    return;
  }

  if (!formData.tradePassword) {
    Taro.showToast({
      title: "请设置交易密码",
      icon: "none",
    });
    return;
  }

  // 密码长度验证
  if (formData.loginPassword.length < 6 || formData.loginPassword.length > 20) {
    Taro.showToast({
      title: "登录密码长度为6-20位",
      icon: "none",
    });
    return;
  }

  if (
    formData.tradePassword.length !== 6 ||
    !/^\d{6}$/.test(formData.tradePassword)
  ) {
    Taro.showToast({
      title: "交易密码必须为6位数字",
      icon: "none",
    });
    return;
  }

  // 更新进度
  steps.value[1].completed = true;
  steps.value[1].active = false;
  steps.value[2].active = true;
  progressWidth.value = "50%";

  Taro.showToast({
    title: "资料保存成功",
    icon: "success",
  });

  // 跳转到下一步
  // Taro.navigateTo({ url: '/pages/webs/member-selection' })
};

// 上一步
const handlePrev = () => {
  // 更新进度
  steps.value[1].active = false;
  steps.value[0].active = true;
  progressWidth.value = "0%";

  // 返回上一页
  Taro.navigateBack();
};
</script>
